<template>
  <a-layout class="console-message-add-wrapper">
    <a-row class="head">
      <a-icon type="left" @click="$router.push('/thirdService/smsTemplate')" />
      <a-col class="title">
        <strong>短信模板配置</strong>
      </a-col>
    </a-row>
    <a-row>
      <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item>
          <div style="font-size: 20px; font-weight: 500; color: #000000; padding-left: 200px">第三方服务信息</div>
        </a-form-model-item>
        <a-form-model-item ref="" label="服务商" prop="">
          <a-input value="阿里云" :disabled="true"></a-input>
        </a-form-model-item>
        <a-form-model-item ref="key" label="账户名" prop="key">
          <a-input v-model="form.key"></a-input>
        </a-form-model-item>
        <a-form-model-item ref="value" label="密钥" prop="value">
          <a-input v-model="form.value"></a-input>
        </a-form-model-item>
        <a-form-model-item>
          <div style="font-size: 20px; font-weight: 500; color: #000000; padding-left: 200px">短信模板信息</div>
        </a-form-model-item>
        <a-form-model-item ref="signName" label="公司签名" prop="signName">
          <a-input placeholder="如：xxx" v-model="form.signName"></a-input>
        </a-form-model-item>
        <a-form-model-item ref="type" label="模板类型" prop="type">
          <a-radio-group v-model="form.type" @change="onChange">
            <a-radio :style="radioStyle" :value="1"> 验证码 </a-radio>
            <a-radio :style="radioStyle" :value="2"> 短信通知 </a-radio>
            <a-radio :style="radioStyle" :value="3"> 推广短信 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item ref="name" label="模板名称" prop="name">
          <a-input placeholder="不超过30个字" v-model="form.name"></a-input>
        </a-form-model-item>
        <a-form-model-item ref="thirdId" prop="thirdId" label="模板id">
          <a-input v-model="form.thirdId" />
        </a-form-model-item>
        <a-form-model-item ref="content" label="模板内容" prop="content">
          <a-textarea :rows="4" :placeholder="placeholders" v-model="form.content"></a-textarea>
          <p v-if="type !== null" style="color: #444444; font-size: 14px; line-height: 22px">
            <a-icon type="exclamation" style="color: red" />{{ prompt }}
          </p>
          <p v-if="type === 3" style="color: #bababa; font-size: 14px; height: 20px">
            不能发送营销/贷款/借款/中奖/抽奖类短信，不支持金融理财&房产通知类短信
          </p>
          <p v-if="type === 3" style="color: #bababa; font-size: 14px; height: 20px">
            推广短信建议在结尾加上空格或其他字符，便于区分营销内容
          </p>
        </a-form-model-item>
        <a-form-model-item ref="description" label="申请说明" prop="description">
          <a-textarea
            v-model="form.description"
            :rows="4"
            placeholder="请描述详细的使用场景，并提供产品链接、App、公众号、公司标准全称等，例： 使用场景：向会员用户推送与XX相关的营销活动 产品链接：www.zhixinren.work.com"
          ></a-textarea>
        </a-form-model-item>
        <a-form-model-item style="display: flex; justify-content: flex-end">
          <div>
            <a-button @click="handleCancel"> 取消 </a-button>
            <a-button type="primary" @click="onSubmit" style="margin-left: 10px"> 提交 </a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-row>
  </a-layout>
</template>
<script>
import { addTempalte, getTemplateDetail, editTempalte } from "./api";
export default {
  data() {
    return {
      templateId: "",
      type: null,
      prompt: "",
      placeholders: "",
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px"
      },
      form: {
        type: 1
      },
      companyId: this.$store.state.hr.companyId,
      labelCol: { span: 5 },
      wrapperCol: { span: 8 },
      isEdit: false
    };
  },

  created() {
    this.isEdit = this.$route.query.isEdit === "1";
    if (this.isEdit) {
      this.templateId = this.$route.query.id;
      this.init();
    }
  },

  beforeDestory() {},
  methods: {
    init() {
      getTemplateDetail(this.templateId)
        .then((res) => {
          this.form.content = res.data.content;
          this.form.description = res.data.description;
          this.form.name = res.data.name;
          this.form.signName = res.data.signName;
          this.form.thirdId = res.data.thirdId;
          this.form.type = res.data.type;
          this.form.value = res.data.value;
          this.form.key = res.data.key;
          this.onChange();
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    onChange() {
      if (this.form.type === 1) {
        this.placeholders = "如：您的验证码为：，该验证码10分钟内有效，请勿泄露于他人。";
        this.prompt =
          "短信字数含“公司签名+模板内容+验证码(<=6位数字或字母)”，短信70个字数含以内，按1条 短信计费；超出70个字为长短信，按照67个字数记为1条短信费用；500字以内。";
      } else if (this.form.type === 2) {
        this.placeholders = "如：尊敬的，您的合同已发送至职薪人小程序，请留意并及时签署。";
        this.prompt =
          "短信字数含“公司签名+模板内容+时间/姓名等”，短信70个字数含以内，按1条短信计费；超出 70个字为长短信，按照67个字数记为1条短信费用；500字以内。";
      } else if (this.form.type === 3) {
        this.placeholders = "请输入短信模板内容";
        this.prompt =
          "短信字数含“公司签名+模板内容”，短信70个字数含以内，按1条短信计费；超出70个字为长短信， 按照67个字数记为1条短信费用；500字以内。";
      }
    },
    onSubmit() {
      var that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const data = {
            isDefault: false,
            ...this.form,
            thirdBeanName: "messageAliyunSMServiceImpl"
          };
          if (this.isEdit) {
            data.id = this.templateId;
            editTempalte(data)
              .then((res) => {
                that.$confirm({
                  type: "success",
                  title: "提交成功",
                  content: "若立即发送短信，需关联发送场景",
                  okText: "前往配置",
                  cancelText: "暂不发送",
                  onOk() {
                    that.$router.push({
                      path: "/thirdService/smsTemplate/config",
                      query: {
                        templateId: res.data.id
                      }
                    });
                  },
                  onCancel() {
                    that.$router.push({
                      path: "/thirdService/smsTemplate"
                    });
                  }
                });
              })
              .catch((err) => {
                console.log("debug log --> ", err);
              });
          } else {
            addTempalte(data)
              .then((res) => {
                that.$confirm({
                  type: "success",
                  title: "提交成功",
                  content: "若立即发送短信，需关联发送场景",
                  okText: "前往配置",
                  cancelText: "暂不发送",
                  onOk() {
                    that.$router.push({
                      path: "/thirdService/smsTemplate/config",
                      query: {
                        templateId: res.data.id
                      }
                    });
                  },
                  onCancel() {
                    that.$router.push({
                      path: "/thirdService/smsTemplate"
                    });
                  }
                });
              })
              .catch((err) => {
                console.log("debug log --> ", err);
              });
          }
        }
      });
    },
    handleCancel() {
      this.$router.push("/thirdService/smsTemplate");
    }
  }
};
</script>
<style lang="scss" scoped>
.console-message-add-wrapper {
  .head {
    .anticon-left {
      z-index: 3;
      left: 24px;
      position: absolute;
      color: #d8d8d8;
      font-size: 24px;
      margin-top: 18px;
    }

    font-size: 16px;
    color: #000;
    font-weight: 500;
    text-align: center;
    line-height: 60px;
    height: 60px;
    border-bottom: 1px solid #e8e8e8;
  }
}
</style>
